<template>
    <view class="personal" style="height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #009EF0;
	background: url('../../../static/image/background1.png') no-repeat center;
	background-size: cover;">
        <view class="user">
            <view class="userimg">
                <image style="width:77px;height:77px;margin-bottom:10px;" :src="userimg"></image>
                <text style="color:#fff;font-size:18px;">{{ username }}</text>
            </view>
        </view>
        <view class="userinfo">
            <view class="text">
                <text class="loginuser" style="color:#999;font-size:12px;">登录名</text>
                <text class="loginname" style="font-size:14px;">{{userinfo.username}}</text>
            </view>
            <view class="text">
                <text class="username" style="color:#999;font-size:12px;">真实姓名</text>
                <text class="username" style="font-size:14px;">{{userinfo.username}}</text>
            </view>
            <view class="text">
                <text class="role" style="color:#999;font-size:12px;">角色</text>
                <text class="role" style="font-size:14px;">{{userinfo.role}}</text>
            </view>
            <view class="text">
                <text class="form" style="color:#999;font-size:12px;">组织</text>
                <text class="form" style="font-size:14px;">{{userinfo.form}}</text>
            </view>
            <view class="text">
                <text class="section" style="color:#999;font-size:12px;">部门</text>
                <text class="section" style="font-size:14px;">{{userinfo.section}}</text>
            </view>
            <view class="text">
                <text class="email" style="color:#999;font-size:12px;">邮箱</text>
                <text class="email" style="font-size:14px;">{{userinfo.email}}</text>
            </view>
            <view class="text">
                <text class="phone" style="color:#999;font-size:12px;">电话</text>
                <text class="phone" style="font-size:14px;">{{userinfo.phone}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data(){
            return {
                username:"世世杰杰",
                userimg:require("../../../static/image/personal_img.png"),
                userinfo:{id:"",
                        loginname:"世世杰杰",
                        username:"李园园",
                        role:"管理员",
                        form:"九寨沟管理局",
                        section:"规划建设处",
                        email:"12345678@123.com",
                        phone:"15196287978",
                }
            }
        },
        methods:{
            outlogin(){
                uni.navigateTo({
                    url:"../login/login"
                })
            }
        }
    }
</script>

<style scoped>
uni-page-body{
    height: 100%;
}
.personal{
    height: 100%;
    background-color:#fff;
    display: flex;
    flex-direction: column;
}


.user{
    flex-direction: column;
    margin: 20px 18px;
}
.userimg{
    background: url('../../../static/image/personal_bg.png') no-repeat center;
    height: 190px;
    border-radius: 20px;
    box-shadow: -5px 10px 10px #E1E1E1;
    background-color: #fff;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.userinfo{
    padding: 0 0px 0 38px;
    flex: 1;
}
.text{
    margin: 0 10px;
    border-bottom: 1px solid #E1E1E1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 0;
}

</style>